参考face-api.js https://github.com/justadudewhohacks/face-api.js#face-api.js-for-the-browse

　　第一阶段实现对图片中人脸的识别并打上标签(比如：人名)　　第二阶段使用摄像头实现对人物的识别，比如典型的应用做一个人脸考勤的系统

face-api.js https://github.com/justadudewhohacks/face-api.js/

　　Face-api.js 是一个 JavaScript API，是基于 tensorflow.js 核心 API 的人脸检测和人脸识别的浏览器实现。它实现了一系列的卷积神经网络（CNN），针对网络和移动设备进行了优化。

filepond https://github.com/pqina/filepond

　　是一个 JavaScript 文件上传库。可以拖入上传文件，并且会对图像进行优化以加快上传速度。让用户体验到出色、进度可见、如丝般顺畅的用户体验。确实很酷的一款上传图片的开源产品。

fancyBox https://fancyapps.com/fancybox/3/

　　是一个 JavaScript 库，它以优雅的方式展示图片，视频和一些 html 内容。它包含你所期望的一切特性 —— 支持触屏，响应式和高度自定义。

准备一个人脸数据库，上传照片，并打上标签（人名），最好但是单张脸的照片，测试的时候可以同时对一张照片上的多个人物进行识别；

提取人脸数据库中的照片和标签进行量化处理，转化成一堆数字，这样就可以进行比较匹配；

使用一张照片来测试一下匹配程度。

代码具体实践步骤

还是先来看看代码吧，做这类开发，并没有想象中的那么难，因为难的核心别人都已经帮你实现了，所以和普通的程序开发没有什么不同，熟练掌握这些api的方法和功能就可以做出非常实用并且非常酷炫的产品。

Clone the repository:

git clone https://github.com/justadudewhohacks/face-api.js.git

cd face-api.js/examples/examples-browsernpm inpm start

Browse to http://localhost:3000/.

cd face-api.js/examples/examples-nodejsnpm i

Now run one of the examples using ts-node:

ts-node faceDetection.ts

Or simply compile and run them with node:

tsc faceDetection.tsnode faceDetection.js

代码·解析

　　这里对face-api.js类库代码做一下简单的说明。

face-api 有几个非常重要的方法下面说明一下都是来自 https://github.com/justadudewhohacks/face-api.js/ 的介绍在使用这些方法前必须先加载训练好的模型,这里并不需要自己照片进行训练了，face-api.js应该是在tensorflow.js上改的所以这些训练好的模型应该和python版的tensorflow都是通用的。所有可用的模型都在https://github.com/justadudewhohacks/face-api.js/tree/master/weights 可以找到。

非常重要参数设置，在优化识别性能和比对的正确性上很有帮助，就是需要慢慢的微调。

最常用的图片识别方法，想要识别什么就调用相应的方法就好了。

Detecting Faces

Detect all faces in an image. Returns Array:

const detections = await faceapi.detectAllFaces(input)

Detect the face with the highest confidence score in an image. Returns FaceDetection | undefined:

const detection = await faceapi.detectSingleFace(input)

By default detectAllFaces and detectSingleFace utilize the SSD Mobilenet V1 Face Detector. You can specify the face detector by passing the corresponding options object:

const detections1 = await faceapi.detectAllFaces(input, new faceapi.SsdMobilenetv1Options())const detections2 = await faceapi.detectAllFaces(input, new faceapi.TinyFaceDetectorOptions())具体可以参考官方Github具体步骤！

若要知道具体实践，可以关注我们的微信公众号平台“计算机视觉研究院”！